<template>
	<!-- 小凡学院 -->
	<view>
		<view><image class="banner" :src="require('../../static/classRoom/banner.png')"></image></view>
		<view class="container requebg">
			<view @click="subClink(item)" v-for="(item, classindex) in classList" :key="classindex" class="classItem" :class="['clitem0' + setbg(item.title)]">
				<view class="classItem_tit">
					<text>{{ item.title }}</text>
				</view>
				<view class="classItem_txt">
					<text>{{ item.name }}</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			classList: {}, //课程列表
			value: ''
		};
	},
	created() {
		this.getClassList();
	},
	onLoad(){
		this.init();
	},
	computed: {},
	methods: {
		init() {
			this.classList = {};
			return this.getClassList();
		},
		getClassList() {
			//课程列表
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/class/getCourseSubject')
					.then(res => {
						this.classList = res;
						resolve();
					})
					.catch(reject);
			});
		},
		// 点击跳转
		subClink(data) {
			uni.navigateTo({
				url: './subject?subid=' + data.subid + '&title=' + data.title
			});
		},
		setbg: function(value) {
			return value == '科目一' ? 1 : value == '科目二' ? 2 : value == '科目三' ? 3 : value == '科目四' ? 4 : value == '教师风采' ? 6 : 5;
		}
	}
	// filters:{
	// 	setbg:function(value){
	// 		return value=='科目一'?1:value=='科目二'?2:value=='科目三'?3:value=='科目四'?4:value=='教师风采'?6:5
	// 	}
	// }
};
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
.banner {
	width: 100%;
	height: 300upx;
}
// .classList{
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// }
.classItem {
	width: 100%;
	height: 249upx;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	.classItem_tit {
		font-size: 32upx;
		margin-top: 70upx;
		width: 80%;
		height: 0upx;
		color: #fff;
		font-weight: bold;
	}
	.classItem_tit::before {
		content: '';
		width: 6upx;
		height: 38upx;
		margin-top: 2upx;
		display: block;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 30upx;
		float: left;
		margin-right: 25upx;
	}
	.classItem_txt {
		width: 80%;
		color: #ffffff;
		opacity: 0.6;
		font-size: 32upx;
		height: 38upx;
		line-height: 38upx;
		padding-left: 30upx;
		margin-top: -30upx;
		text {
			display: block;
			width: 70%;
			overflow: hidden;
			line-height: 30px;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 32upx;
		}
	}
}
.classItem:last-child {
	margin-bottom: 100upx;
}
.clitem01 {
	background: url(../../static/classRoom/subject01.png) no-repeat;
	background-size: 100%;
}
.clitem02 {
	background: url(../../static/classRoom/subject02.png) no-repeat;
	background-size: 100%;
}
.clitem03 {
	background: url(../../static/classRoom/subject03.png) no-repeat;
	background-size: 100%;
}
.clitem04 {
	background: url(../../static/classRoom/subject04.png) no-repeat;
	background-size: 100%;
}
.clitem05 {
	background: url(../../static/classRoom/subject05.png) no-repeat;
	background-size: 100%;
}
.clitem06 {
	background: url(../../static/classRoom/subject06.png) no-repeat;
	background-size: 100%;
}
.requebg {
	background: url(../../static/classRoom/circular_bg.png) no-repeat right;
	background-position: 200upx 0;
	margin: 46upx 15upx;
}
</style>
